<template>
  <div style="display: flex;justify-content: center;align-items: center;height: 100%;">
    <div class="login-box">
      <div class="chat-icon">
        <!-- <i class="el-icon-chat-dot-round"></i> -->
        <img src="../assets/logo2.png" class="logo" alt="logo">
      </div>
      <!-- <h2 style="color: white;">SZTU-CHATBOT</h2> -->
      <img src="" alt="">
      <h1 style="color:white;font-size: 40px;margin-top: 50px;">登录</h1>
      <div style="color: white;font-size: 13px;margin-top: -20px;">请使用学号登录，默认密码为学号</div>
      <div style="width: 90%;margin-top: 90px;">
        <div style="color: white;margin-bottom: 10px;">学号</div>
        <el-input placeholder="请输入学号" v-model="studentId"></el-input>
      </div>
      <div style="width: 90%;margin-top: 20px;">
        <div style="color: white;margin-bottom: 10px;">密码</div>
        <el-input placeholder="请输入密码" show-password v-model="password" @keydown.enter.native="submit"></el-input>
      </div>
      <el-button @click="submit" type="info"
        style="width: 90%;margin: 40px;color: white;border-radius: 18px;">登录</el-button>
      <div>
        <div class="big-border-circle"></div>
        <div class="small-border-circle"></div>
        <div class="big-circle"></div>
        <div class="small-circle"></div>
      </div>
      <div class="register" @click="registerShow=true">注册</div>

    </div>
    <PopUp title="注册" v-model="registerShow" :father-method="register">
      <div style="display: flex;flex-direction: column; gap: 20px;">
        <div style="width: 90%;">
          <div style="color: white;margin-bottom: 10px;">姓名</div>
          <el-input placeholder="请输入姓名" v-model="registerForm.name"></el-input>
        </div>
        <div style="width: 90%;">
          <div style="color: white;margin-bottom: 10px;">学号</div>
          <el-input placeholder="请输入学号" v-model="registerForm.studentId"></el-input>
        </div>
        <div style="width: 90%;">
          <div style="color: white;margin-bottom: 10px;">密码</div>
          <el-input placeholder="请输入密码" show-password v-model="registerForm.password"></el-input>
        </div>
      </div>
    </PopUp>
  </div>

</template>

<script>
import { login, registerToServer } from '@/api/login'
import PopUp from '@/components/PopUp.vue';
export default {
  data(){
    return{
      studentId:'',
      password:'',
      registerShow:false,
      registerForm:{
        studentId:'',
        password:'',
        name:''
      }
    }
  },
  methods:{
    async submit(){
      if(this.studentId.trim().length===0){
        this.$notify('请输入学号')
        return
      }
      if (this.password.trim().length===0) {
        this.$notify('请输入密码')
        return
      }
      let data = { studentId: this.studentId ,password:this.password}
      let res= await login(data)    
      if (res.data.code === 1) {
        this.$store.commit('updateToken', res.data.data)
        this.$router.push('/home')
        return
      }


    },
    async register(){
      if(this.registerForm.studentId.trim().length===0){
        this.$notify('请输入学号')
        return
      }
      if (this.registerForm.password.trim().length===0) {
        this.$notify('请输入密码')
        return
      }
      if (this.registerForm.name.trim().length===0) {
        this.$notify('请输入姓名')
        return
      }
      let res= await registerToServer(this.registerForm)    
      if (res.data.code === 1) {
        this.$notify('注册成功')
        this.registerShow=false
        return
      }
    }
  },
  components:{
    PopUp
  }
}
</script>

<style>
.login-box{
  background-color: #282828;
  height: 95%;
  width: 600px;
  /* margin: 20px 20px; */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  position: relative;
}
.chat-icon{
  width: 50px;
  height: 50px;
  /* background-color: white; */
  color:black;
  display: flex;justify-content: center;align-items: center;
  font-size: 20px;
  /* border-radius: 50%; */
  margin:70px 0 15px 0;
}
.el-input__inner:focus{
  border-color: white !important;
}
.el-input__inner{
  background-color: #333333 !important;
  border-radius: 18px !important;
  border: #333333 1px solid !important;
}
.el-button--info{
  background-color: black !important;
  border: none !important;
}

.el-button--info:hover{
  background-color: rgba(0, 0, 0, 0.6) !important; 
}
.big-border-circle{
  position: absolute;
  width: 500px;
  height: 500px;
  border: #333333 1px solid;
  border-radius: 50%;
  z-index: 2;
  left: 57%;
  top: 8%;
  clip-path: polygon(50% 0,50% 100%,100% 100%,100% 0)
}
.small-border-circle{
  position: absolute;
  width: 100px;
  height: 100px;
  border: #333333 1px solid;
  background-color: #161616;
  border-radius: 50%;
  z-index: 4;
  left: 130%;
  top: 30%;
}
.big-circle{
    position: absolute;
    width: 500px;
    height: 500px;
    background-color: #333333;
    border-radius: 50%;
    z-index: 2;
    right: 58%;
    top: 28%;
    clip-path: polygon(0 0,50% 0,50% 100%,0 100%)
}
.small-circle {
  position: absolute;
  width: 100px;
  height: 100px;
  /* border: #333333 1px solid; */
  background-color: #161616;
  border-radius: 50%;
  z-index: 4;
  right: 130%;
  bottom: 20%;
}
.logo{
  max-width: 180px;
  max-height: 180px;
  /* 超出等比例缩小 */
  object-fit: contain;

}
.register{
  color: whitesmoke;
  font-size: 14px;
  width: 90%;
  background-color: #6d6d6d;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  margin-top: -20px;
  cursor: pointer;
}
.register:hover{
  background-color: #5c5c5c;
}
</style>